<template>
  <div style="position: relative">
    <div :id="id" />
    <el-button v-if="save" type="primary" style="position: absolute; right: 5px; top: 1px" @click="save">保存</el-button>
  </div>
</template>

<script>
const E = require('wangeditor')
export default {
  name: 'Wangeditor',
  props: {
    save: Function,
    value: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: 'wangeditor'
    }
  },
  data() {
    return {
      isChange: false,
      editor: null
    }
  },
  watch: {
    value(value) {
      if (!this.isChange) {
        this.editor.txt.html(value || '')
      }
      this.isChange = false
    }
  },
  mounted() {
    this.editor = new E('#' + this.id)
    const _this = this
    this.editor.config.constructorList = [
      // 'head',  // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      // 'strikeThrough',  // 删除线
      // 'foreColor',  // 文字颜色
      // 'backColor',  // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      // 'quote',  // 引用
      // 'emoticon',  // 表情
      'image', // 插入图片
      'table' // 表格
      // 'video',  // 插入视频
      // 'code',  // 插入代码
      // 'undo',  // 撤销
      // 'redo'  // 重复
    ]
    this.editor.config.uploadImgServer =
      process.env.VUE_APP_BASE_API + '/tool/upload'
    this.editor.config.onchange = (html) => {
      this.isChange = true
      _this.$emit('input', html)
    }
    this.editor.config.zIndex = 1
    this.editor.create()
    this.editor.txt.html(this.value ? this.value : '')
  }
}
</script>
